<template>
    <div class="station-list">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 基础表格 </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
                <div class="select-head">
                    <el-select v-model="query.sourceDataId" placeholder="数据中心" @change="onSearch" size="medium" clearable>
                        <el-option
                            v-for="item in dataSourceSelect"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button icon="el-icon-plus" @click="station = {},addVisible=true" class="button-add">添加站点</el-button>
                </div>
                <div class="table-body">
                    <el-table :data="tableData" border style="width: 100%"
                        height='calc(100vh - 280px)'
                        :header-row-style="{borderRadius: '10px 10px 0px 0px' }"
                        :header-cell-style="{textAlign:'center',fontSize: '21px', 
                            fontFamily: 'Adobe Heiti Std', fontWeight: '600', color: '#606266' }"
                        :cell-style="{textAlign:'center',fontSize:'16px',color:'#919398'}"
                        >

                        <el-table-column prop="name" label="站点名称"> </el-table-column>
                        <el-table-column prop="dataSourceName" label="所属数据中心"> </el-table-column>
                        <el-table-column  label="操作" >
                            <template slot-scope="scope">
                                <!-- <el-button style="background:#E73F3F;color:#fff" size="mini" round>删除</el-button> -->
                                <el-button style="background:#BF69D4;color:#fff" size="mini" round  @click="showEdit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
        </div>
        <!-- 编辑站点 -->
        <el-dialog title="编辑站点" :visible.sync="editVisible" center 
            :close-on-click-modal = "false" :close-on-press-escape = "false" :show-close = "false"
            width="33%" top="25vh" class="add">

            <el-form ref="editForm" :rules="saveRules" :model="editStation" label-width="120px">
                <el-form-item label="站点名称"  prop="name">
                    <el-input v-model="editStation.name" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据中心" prop="sourceDataId">
                    <el-select v-model="editStation.sourceDataId" placeholder="所属数据中心" size="medium">
                        <el-option
                            v-for="item in dataSourceSelect"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>   
                                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="background:#fff;color:#785DF1;font-size:20px;font-weight:400;" @click="editVisible = false" size="medium">取 消</el-button>
                <el-button  style="background:#785DF1;color:#fff;font-size:20px;font-weight:400;"  @click="saveEdit" size="medium">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加站点" :visible.sync="addVisible" center 
            :close-on-click-modal = "false" :close-on-press-escape = "false" :show-close = "false"
            width="33%" top="25vh" class="add">

            <el-form ref="addForm" :rules="saveRules" :model="station" label-width="120px">
                <el-form-item label="站点名称"  prop="name">
                    <el-input v-model="station.name" size="medium"></el-input>
                </el-form-item>
                <el-form-item label="数据中心" prop="sourceDataId">
                    <el-select v-model="station.sourceDataId" placeholder="所属数据中心" size="medium">
                        <el-option
                            v-for="item in dataSourceSelect"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>   
                                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="background:#fff;color:#785DF1;font-size:20px;font-weight:400;" @click="station={},addVisible = false" size="medium">取 消</el-button>
                <el-button  style="background:#785DF1;color:#fff;font-size:20px;font-weight:400;"  @click="saveAdd" size="medium">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { dataSourceListData,stationListData,updateStationData} from '@/api/index';
export default {
    name: 'StationList',
    data() {
        return {
            saveRules:{
                name:[
                    { required: true, message: '请输入磅组名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }],
                sourceDataId:[{ required: true, message: '请选择所属数据中心', trigger: 'change' }]
            },
            // 编辑站点
            editVisible:false,
            editStation:{},



            //添加站点
            addVisible:false,
            // 添加的站点
            station:{},

            /*下拉框的查询条件 */
            dataSourceSelect:[],//数据中心的列表

            query: {},
            tableData: []
        };
    },
    created() {
        this.onSearch()
        //获取搜索条件
        this.listQueryParams()
    },
    methods: {
        // 获取查询条件数据 数据中心数据
        listQueryParams(){
            dataSourceListData().then(res=>{
                this.dataSourceSelect = res.data
            })
        },
        //查询
        onSearch(){
            stationListData(this.query).then(res=>{
                this.tableData = res.data
            })
        },
        /**
         * 编辑当前磅组信息
         */
        showEdit(row){
            let {id,name,sourceDataId} = row
            this.editStation = {name,sourceDataId,id}
            this.editVisible = true
        },
        //保存编辑后的内容
        saveEdit(){
         this.$refs.editForm.validate((valid) => {
            if (!valid) {
                return false;
            } 
            //校验通过 执行逻辑处理
            this.$confirm('确定要要保存该设备数据吗？', '提示', {
                type: 'warning'
            }).then(() => {
               this.executeMethod(this.editStation,'editVisible')
            }).catch(() => {});
            });

        },

        /**
         * 保存添加
         */
        saveAdd(){
         this.$refs.addForm.validate((valid) => {
            if (!valid) {
                return false;
            } 
            //校验通过 执行逻辑处理
            this.$confirm('确定要要保存该设备数据吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.executeMethod(this.station,'addVisible')
            }).catch(() => {});
            });
        },
                /***
         * 具体调用接口的方法
         */
         executeMethod(data,visible){
            updateStationData(data).then(res=>{
                if (res.success) {
                    this.$message.success("保存成功")
                    this[visible] = false
                    this.onSearch()
                }
            })
        },
    }
};
</script>

<style scoped>
/* 添加设备按钮 */
.button-add{
    float: right;
    width: 163px;
    height: 43px;
    background: #FFFFFF;
    border: 1px solid #C4B0FD;
    border-radius: 10px;
    color: #AD60CF;

    font-size: 24px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    line-height: 13px;
}
.station-list .container{
    height: calc((100vh - 220px));
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px rgba(44, 80, 197, 0.18);
    border-radius: 10px;
}
.station-list .container .select-head{
    margin-bottom: 20px;
}

/* 添加设备弹框 */
/* .add{
    border-radius: 10px;
} */
.station-list .add .add-plus{
    font-size: 18px;
    font-weight: 900;
    color: #745CF2;
    margin-left: 5px;
}
.add /deep/ .el-input{
    width: 268px;
    /* height:40px ; */
}
.add /deep/ .el-dialog__title{
    width: 79px;
    height: 19px;
    font-size: 20px;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #333333;
}
.add /deep/ .el-dialog__body{
    margin-left: 15%;
}
.add /deep/ .el-form-item__label{
    width: 71px;
    height: 18px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #626262;
}
</style>
